<template>
	<div class="system-systemUserdmin-dialog-container">
		<el-dialog :close-on-click-modal="false" :title="state.dialog.title" v-model="state.dialog.isShowDialog"
			width="600px">

			<el-card shadow="hover">
				<el-form :model="state.ruleForm" ref="datainterfaceDialogFormRef" :rules="rules" size="default"
					label-width="120px">
					<el-row :gutter="35">


						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
							<el-form-item label="用户地址">
								<el-input :disabled.sync="true" v-model="state.ruleForm.address"
									placeholder="用户地址"></el-input>
							</el-form-item>
						</el-col>


						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
							<el-form-item label="产品" prop="payProductId">
								<el-select clearable v-model="state.ruleForm.payProductId">
									<el-option :label="i.productName" :value="i.productId" :key="i.productId"
										v-for="i in state.dataList"></el-option>
								</el-select>
							</el-form-item>
						</el-col>




						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
							<el-form-item label="支付币种" prop="coinSymbol">
								<el-select clearable v-model="state.ruleForm.coinSymbol">
									<el-option label="USDT" value="USDT"></el-option>
									<el-option label="BNB" value="BNB"></el-option>
								</el-select>
							</el-form-item>
						</el-col>


						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
							<el-form-item label="支付金额" prop="payRealAmount">
								<el-input v-model="state.ruleForm.payRealAmount" placeholder="支付金额"></el-input>
							</el-form-item>
						</el-col>






						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
							<el-form-item label="是否发放层级奖" prop="levelRewardFlag">
								<el-select clearable v-model="state.ruleForm.levelRewardFlag">
									<el-option label="是" value="1"></el-option>
									<el-option label="否" value="0"></el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
							<el-form-item label="是否发放直推奖" prop="staticRewardFlag">
								<el-select clearable v-model="state.ruleForm.staticRewardFlag">
									<el-option label="是" value="1"></el-option>
									<el-option label="否" value="0"></el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
							<el-form-item label="是否发放团队奖" prop="teamRewardFlag">
								<el-select clearable v-model="state.ruleForm.teamRewardFlag">
									<el-option label="是" value="1"></el-option>
									<el-option label="否" value="0"></el-option>
								</el-select>
							</el-form-item>
						</el-col>




						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
							<el-form-item label="谷歌验证码" prop="code">
								<el-input v-model="state.ruleForm.code" placeholder="谷歌验证码"></el-input>
							</el-form-item>
						</el-col>

					</el-row>
				</el-form>


			</el-card>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>

	</div>
</template>

<script setup lang="ts" name="systemDicDialog">
import { ElMessage } from 'element-plus';
import { reactive, ref, watch } from 'vue';

import { formatDate } from '/@/utils/formatTime';

// 导入接口
import { useKisarApi } from '/@/api/kisar/index';


const datainterfaceDialogFormRef = ref();


// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);




const rules = {
	code: [
		{ required: true, message: "请输入谷歌验证码", trigger: "blur" }
	],
	address: [
		{
			required: true,
			message: "不能为空，请重新输入！",
			trigger: "blur"
		}
	],
	coinSymbol: [
		{
			required: true,
			message: "不能为空，请重新输入！",
			trigger: "blur"
		}
	],
	payRealAmount: [
		{
			required: true,
			message: "不能为空，请重新输入！",
			trigger: "blur"
		}
	],
	payProductId: [
		{
			required: true,
			message: "不能为空，请重新选择！",
			trigger: "blur"
		}
	],
	levelRewardFlag: [
		{
			required: true,
			message: "不能为空，请重新选择！",
			trigger: "blur"
		}
	],
	staticRewardFlag: [
		{
			required: true,
			message: "不能为空，请重新选择！",
			trigger: "blur"
		}
	],
	teamRewardFlag: [
		{
			required: true,
			message: "不能为空，请重新选择！",
			trigger: "blur"
		}
	]
}


const state = reactive({
	// 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
	address: "",
	dataList: [] as any,
	ruleForm: {
		address: "",
		payProductId: "",
		coinSymbol: "",
		payRealAmount: "",
		levelRewardFlag: "",
		staticRewardFlag: "",
		teamRewardFlag: "",
		code: ""
	} as any,
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});


const getProductList = async () => {
	let tempList = await useKisarApi().getProductList();
	state.dataList = tempList;
}



// 打开弹窗
const openDialog = async (type: string, row?: any, levelList?: any) => {
	if (type === 'edit') {

		await getProductList()

		state.ruleForm = {
			address: row.address,
			payProductId: "",
			coinSymbol: "",
			payRealAmount: "",
			levelRewardFlag: "",
			staticRewardFlag: "",
			teamRewardFlag: "",
			code: ""
		}


		state.dialog.title = '添加订单';
		state.dialog.submitTxt = '确 定';
	}
	state.dialog.type = type;
	state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};


// 取消
const onCancel = () => {
	closeDialog();
};
// 提交
const onSubmit = () => {



	// 检查顶层表单
	datainterfaceDialogFormRef.value.validate(async (valid: any) => {
		if (valid) {
			//检查参数列表

			try {
				if (state.dialog.type == 'edit') {
					let vo = {
						address: state.ruleForm.address,
						payProductId: state.ruleForm.payProductId,
						coinSymbol: state.ruleForm.coinSymbol,
						payRealAmount: state.ruleForm.payRealAmount,
						levelRewardFlag: state.ruleForm.levelRewardFlag,
						staticRewardFlag: state.ruleForm.staticRewardFlag,
						teamRewardFlag: state.ruleForm.teamRewardFlag,
					} as any;
					await useKisarApi().adminCreateOrder(vo, state.ruleForm.code);
				}
				ElMessage.success("操作成功");
				closeDialog(); // 关闭弹窗
				emit('refresh');
			} catch (error: any) {
				ElMessage.error(error.msg);
			}




		} else {
			ElMessage.warning("请检查数据的正确性！");
		}
	})



};





watch(
	() => state.dialog.isShowDialog,
	(newValue) => {
		if (newValue == true) {

		}
	}, { immediate: true }
);




// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style lang="scss">
.el-select {
	width: 100% !important;
}



.system-systemUserdmin-dialog-container {
	.bar_tools {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.el-table__expanded-cell {
		padding: 20px;
	}


	.alig_container {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;

		&>div {
			margin: 15px 0px;
			display: flex;
			justify-content: center;
		}
	}
}
</style>